<template>
  <!-- 查看详情 2018/3/7 11:44 zhangQ -->
  <div>

    <tablePage ref="subOrderTab" :staticData="subOrderData" :isStartLoad="false" :mode="1">
      <template slot-scope="props">
        <Table :columns="subOrderColumn" border :data="props.data" @on-sort-change="props.sortChange"></Table>
      </template>
    </tablePage>

    <xlinkModal v-model="ImgModel" title="图片" className="vertical-center-modal" width="700px;">
      <viewMedia :lookImtList="lookImtList" v-if="ImgModel"></viewMedia>
    </xlinkModal>
  </div>
</template>

<script>
  import { getOrderDetail } from '@api/backEnd/mainOrder'
  import xlinkModal from '@components/modal/xlinkModal'
  import viewMedia from './viewMedia'
  import tablePage from '@components/table/tablePage.vue'
  import moment from 'moment'

  export default {
    name: 'view-detail',
    data () {
      let subOrderColumn = [
        {
          title: '子运单单号',
          ellipsis: 'true',
          key: 'orderNo',
          width: 200
        },
        {
          title: '箱号',
          ellipsis: 'true',
          key: 'containerNoBody',
          width: 150,
          render: (h, params) => {
            let containerNo = params.row.containerNoHead + params.row.containerNoBody
            return (<span>{containerNo}</span>)
          }
        },
        {
          title: '拉运车号',
          ellipsis: 'true',
          width: 120,
          key: 'truckPlate'
        },
        {
          title: '重箱出场时间',
          ellipsis: 'true',
          width: 200,
          key: 'bindTime',
          render: (h, params) => {
            let thisdata = params.row.bindTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '车队名称',
          ellipsis: 'true',
          width: 120,
          key: 'fleetName'
        },
        {
          title: '司机名称',
          ellipsis: 'true',
          width: 150,
          render: (h, params) => {
            return (<span title={params.row.driverName}>{params.row.driverName}</span>)
          }
        },
        {
          title: '送货地址',
          ellipsis: 'true',
          width: 200,
          render: (h, params) => {
            return (<span title={params.row.shippingAddress}>{params.row.shippingAddress}</span>)
          }
        },
        {
          title: '状态',
          ellipsis: 'true',
          width: 100,
          key: 'grossWeightTime',
          render: (h, params) => {
            let fleetName = params.row.fleetName
            let driverName = params.row.driverName
            let shippingAddress = params.row.shippingAddress
            let emptyBindTime = params.row.emptyBindTime
            let bindTime = params.row.bindTime
            if (fleetName && driverName && shippingAddress && emptyBindTime && bindTime) {
              return (<span>已完成</span>)
            } else if (!emptyBindTime && bindTime) {
              return (<span style="color:green">配送中</span>)
            } else if (!driverName) {
              return (<span style="color:red">待配送</span>)
            } else {
              return ''
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 100,
          render: (h, params) => {
            let viewImg = ''
            if (params.row.voucherImg && JSON.parse(params.row.voucherImg).length > 0) {
              viewImg = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailImg(params.row)}>图片查看</i-button>)
            } else {
              viewImg = (<i-button size="small" style="margin-right: 5px;">图片查看</i-button>)
            }
            let btnArray = []
            powerUtil.contains('viewDetail') && btnArray.push(viewImg)
            return (btnArray)
          }
        }
      ]
      let noticeRecordColumn = [
        {
          title: '车队名称',
          ellipsis: 'false',
          key: 'fleetName'
        },
        {
          title: '送货地址',
          ellipsis: 'false',
          key: 'addresses'
        }
      ]
      let subOrderData = []
      let positionList = []
      let noticeRecordData = []
      let ImgModel = false
      let currentName = '1'
      let lookImtList = []
      let datas = { currentName, subOrderColumn, subOrderData, positionList, noticeRecordColumn, noticeRecordData, ImgModel, lookImtList }
      return datas
    },
    props: {
      currentMainOrder: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {},
    methods: {
      /**
       * TODO(获得子运单信息)
       * @auther zhangQ
       * @date 2018/3/16 15:40
       **/
      getSubOrderData () {
        if (!(this.currentMainOrder && this.currentMainOrder.orderNo)) {
          return
        }
        let param = {
          orderNo: this.currentMainOrder.orderNo
        }
        getOrderDetail(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.subOrderData = res.data.data.sub
            this.positionList = res.data.data.position
          } else {
            Promise.reject(new Error(res.data.res))
          }
        }).catch((err) => {
          console.log('接口getOrderDetail:' + err)
        })
      },
      viewDetailImg (row) {
        console.log('viewDetailImg', row.voucherImg)
        this.lookImtList = JSON.parse(row.voucherImg)
        this.ImgModel = true
      }
    },
    mounted () {
      this.getSubOrderData()
    },
    components: { tablePage, xlinkModal, viewMedia }
  }
</script>
